
<template>
  <div class="num">
    <div class="content">
      <div class="title">截至{{covData.modifyTime | time}}全国数据统计</div>
      <ul class="wrap">
        <li>
          <div class="number">
            <span>较昨日<i style="color: red;">{{covData.currentConfirmedIncr | number}}</i></span>
          </div>
          <div class="bold">{{covData.currentConfirmedCount | division}}</div>
          <strong>现存确诊</strong>
        </li>
        <li>
          <div class="number">
            <span>较昨日<i style="color: rgb(78,139,230);">{{covData.suspectedIncr | number}}</i></span>
          </div>
          <div class="bold">{{covData.suspectedCount | division }}</div>
          <strong>境外输入</strong>
        </li>
        <li>
          <div class="number">
            <span>较昨日<i style="color: orange;">{{covData.seriousIncr | number}}</i></span>
          </div>
          <div class="bold">{{covData.seriousCount | division}}</div>
          <strong>现存无症状</strong>
        </li>
        <li>
          <div class="number">
            <span>较昨日<i style="color: rgb(190,33,33);">{{covData.confirmedIncr | number}}</i></span>
          </div>
          <div class="bold">{{covData.confirmedCount | division}}</div>
          <strong>累计确诊</strong>
        </li>
         <li>
          <div class="number">
            <span>较昨日<i style="rgb(78,90,101);">{{covData.deadIncr | number}}</i></span>
          </div>
          <div class="bold">{{covData.deadCount | division}}</div>
          <strong>累计死亡</strong>
        </li>
         <li>
          <div class="number">
            <span>较昨日<i style="color: green;">{{covData.curedIncr | number}}</i></span>
          </div>
          <div class="bold">{{covData.curedCount | division}}</div>
          <strong>累计治愈</strong>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CovNumber',
  props:['covData'],
  filters:{
    number:function(val){
      val = val>=0 ? '+' + val : val;
      return val;
    },
    //处理时间格式--- js:年月日
    time: function (time) {
      time = new Date().toLocaleString("chinese", { hour12: false });
      return time;
    },
    //js 中数字加逗号处理(每三位加逗号)
    division: function (num) {
      if (num == undefined) return "";
      // console.log('num---',num);
      //方式1：
      // console.log('格式---',num.toLocaleString());
      return num.toLocaleString();
      //方式2：正则处理
    //   return num.toString().replace(/\d+/, function (n) {
    //     return n.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
    //   });
    }
  }
}
</script>

<style scoped>
.num{
  background-color: rgb(224, 223, 223);
  padding-top: 0.2rem;
}
.content{
  background: #fff;
  padding: 0.3rem;
  min-height: 2rem;
  border-radius:0.2rem 0.2rem 0 0;
}
.title{
  margin-bottom: .2rem;
  color:rgb(161, 156, 156);
}
.wrap{
  display:flex;
  flex-wrap: wrap;
  padding-top: 0.2rem;
  border-radius: 0.1rem;
  box-shadow: 0 0 2px 1px rgba(175, 172 ,172 ,20%);
}
span{
  color:rgb(124,124,124);
}
span i{
  font-style: normal;
  font-size: 0.3rem;
}
.wrap li{
  width: 33.333333%;
  text-align: center;
  margin-bottom: 0.2rem;
}
.wrap li strong{
  color: #333;
}
.bold{
  font-weight: bold;
}
.wrap li:nth-child(1) .bold{
  color: red;
}
.wrap li:nth-child(2) .bold{
  color: rgb(78,139,230);
}
.wrap li:nth-child(3) .bold{
  color: orange;
}
.wrap li:nth-child(4) .bold{
  color: rgb(190,33,33);
}
.wrap li:nth-child(5) .bold{
  color: rgb(78,90,101);
}
.wrap li:nth-child(6) .bold{
  color: green;
}
</style>

